import React from 'react';
interface InputSectionProps {
  activeType: "image" | "video" | "migration" | "digital" | "action";
  selectedFeature: string;
  prompt: string;
  setPrompt: (prompt: string) => void;
  stylePrompt: string;
  setStylePrompt: (prompt: string) => void;
  colorPrompt: string;
  setColorPrompt: (prompt: string) => void;
  contentPrompt: string;
  setContentPrompt: (prompt: string) => void;
  noiseLevel: string;
  setNoiseLevel: (level: string) => void;
}

const InputSection: React.FC<InputSectionProps> = ({
  activeType,
  selectedFeature,
  prompt,
  setPrompt,
  stylePrompt,
  setStylePrompt,
  colorPrompt,
  setColorPrompt,
  contentPrompt,
  setContentPrompt,
  noiseLevel,
  setNoiseLevel
}) => {
  if (activeType === "digital") {
    return (
      <div className="noise-input-container">
        <label className="noise-label">噪点级别</label>
        <input
          type="number"
          value={noiseLevel}
          onChange={(e) => setNoiseLevel(e.target.value)}
          className="noise-input"
          min="0"
          max="1"
          step="0.1"
          placeholder="0.2"
        />
      </div>
    );
  }

  // 风格参考模式、图像迁移模式、双图编辑参考风格、光线氛围模式不显示任何输入框
  if ((activeType === "image" && selectedFeature === "风格参考") || 
      activeType === "migration" ||
      (activeType === "action" && selectedFeature === "双图编辑参考风格") ||
      (activeType === "action" && selectedFeature === "光线氛围")) {
    return null;
  }

  // 图片编辑模式（单图指令编辑、双图编辑、双图指令编辑）显示单个输入框
  if (activeType === "action" && (selectedFeature === "单图指令编辑" || selectedFeature === "双图编辑" || selectedFeature === "双图指令编辑")) {
    return (
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        className="card-prompt-input"
        aria-label="prompt"
        maxLength={150}
        rows={3}
        placeholder="请输入编辑指令，例如：将背景改为蓝色，添加一些装饰元素"
      />
    );
  }

  // 视频生成模式显示普通提示词输入框
  if (activeType === "video") {
    return (
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        className="card-prompt-input"
        aria-label="prompt"
        maxLength={150}
        rows={3}
        placeholder="请输入视频生成的提示词，例如：做一张情人节海报"
      />
    );
  }

  // 图片生成模式显示智能提示词输入框
  if (activeType === "image") {
    return (
      <div className="smart-prompt-container">
        <div className="prompt-section">
          <label className="prompt-label">风格描述</label>
          <textarea
            value={stylePrompt}
            onChange={(e) => setStylePrompt(e.target.value)}
            className="prompt-input"
            placeholder="现代风格"
            rows={2}
          />
        </div>
        <div className="prompt-section">
          <label className="prompt-label">色调描述</label>
          <textarea
            value={colorPrompt}
            onChange={(e) => setColorPrompt(e.target.value)}
            className="prompt-input"
            placeholder="青蓝色调"
            rows={2}
          />
        </div>
        <div className="prompt-section">
          <label className="prompt-label">固定内容描述</label>
          <textarea
            value={contentPrompt}
            onChange={(e) => setContentPrompt(e.target.value)}
            className="prompt-input"
            placeholder="深灰色木地板,柚木墙板,米色肌理乳胶漆天花板"
            rows={2}
          />
        </div>
      </div>
    );
  }

  // 其他模式（图片编辑等）显示智能提示词输入框
  return (
    <div className="smart-prompt-container">
      <div className="prompt-section">
        <label className="prompt-label">风格描述</label>
        <textarea
          value={stylePrompt}
          onChange={(e) => setStylePrompt(e.target.value)}
          className="prompt-input"
          placeholder="现代风格"
          rows={2}
        />
      </div>
      <div className="prompt-section">
        <label className="prompt-label">色调描述</label>
        <textarea
          value={colorPrompt}
          onChange={(e) => setColorPrompt(e.target.value)}
          className="prompt-input"
          placeholder="青蓝色调"
          rows={2}
        />
      </div>
      <div className="prompt-section">
        <label className="prompt-label">固定内容描述</label>
        <textarea
          value={contentPrompt}
          onChange={(e) => setContentPrompt(e.target.value)}
          className="prompt-input"
          placeholder="深灰色木地板,柚木墙板,米色肌理乳胶漆天花板"
          rows={2}
        />
      </div>
    </div>
  );
};

export default InputSection;
